<template>
    <div class="list">
        <good @click="goDetail(item)" class="good" @del="remove" v-for="item in state.list" :key="item._id" :good="item"></good>
    </div>
</template>

<script>
import axios from 'axios'
import good from '@/components/good'
import { onMounted, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default {
    name: '',
    components: {
        good
    },
    // vue3的写法
    setup() {
        let router = useRouter()
        // console.log(router);
        let route = useRoute()
        // console.log(route);
        let state = reactive({
            list: []
        })
        onMounted(() => {
            axios.get('/goods.json').then(res => {
                state.list = res.data
            })
        })

        function remove(id) {
            state.list = state.list.filter(item => {
                return item._id != id
            })
        }

        function goDetail(item) {
            // console.log({...item});
            router.push({
                path: '/about',
                query: {
                    ...item
                }
            })
        }

        return {
            state,
            remove,
            goDetail
        }
    }

//   vue2的写法
//   data() { 
//     return {
//         list: []
//     }
//   },
//   created() {
//       axios.get('/goods.json').then(res => {
//           console.log(res);
//           this.list = res.data
//       })
//   },
//   methods:{
//       remove(id) {
//           this.list = this.list.filter(item => {
//               return item._id != id
//           })
//       },

//       goDetail(item) {
//           this.$router.push({
//               path: '/about',
//               query: {
//                 ...item
//               }
//           })
//       }
//   },
 }
</script>

<style scoped lang="scss">
.list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding: 10px;
padding-left: 0px;
.good {
    flex-basis: calc(50% - 10px) ;
    border: 1px solid #eee;
    margin-top: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 330px;
    margin-left: 10px;
}
}
</style>